<template>
  <div class="wrap">
    <div class="menu">
      <div v-for='(item,index) in navData' :key='index'>
        <router-link class="item" :to="item.path">{{item.title}}</router-link>
      </div>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import {navData} from '@/untils/nav'
export default {
  name: 'App',
  setup() {
    // 实例化路由
    // const router = useRouter()
    // function toReport() {
    //   router.push({
    //     path: 'report'
    //   })
    // }

    return {
      // toReport
      navData
    }
  }
}
</script>

<style lang="scss" scoped>
body {
  margin: 0;
  padding: 0;
}
.wrap {
  width: 100%;
  display: flex;
  height: 100vh;
  .menu {
    background: linear-gradient(to top, #eaecc6, #4cd0f1);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 200px;
    .item {
      margin-bottom: 20px;
      text-decoration: none !important;
      color: white;
    }
    .item:hover {
      color: #4a4a4a;
      cursor: pointer;
    }
  }
  .content {
    width: 100%;
    background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
  }
}
</style>
